<template>
	 <app-layout>
		 <view class="dir-top-nowrap recharge" >
		 	<view class="" >
		 		<view class="account" style="margin-top: 18rpx;">我的等级：{{userInfo.name}}</view>
				<view class="account" style="margin-top: 18rpx;">团队累计销售(套)</view>
				<view :style="{'background-image': `url(${appImg.mall.balance_recharge})`}"
				      class="dir-left-nowrap bg cross-center">
				    <image class="image box-grow-0" src="../balance/image/icon-balance.png"></image>
				    <view class="balance-text box-grow-1"></view>
				    <view class="balance-price box-grow-0">{{userInfo.options.bail_num}}</view>
				</view>
				<view class="account" style="margin-top: 18rpx;">团队累计销售(元)</view>
				<view :style="{'background-image': `url(${appImg.mall.balance_recharge})`}"
				      class="dir-left-nowrap bg cross-center">
				    <image class="image box-grow-0" src="../balance/image/icon-balance.png"></image>
				    <view class="balance-text box-grow-1"></view>
				    <view class="balance-price box-grow-0">{{userInfo.options.new_team_sales}}</view>
				</view>
				<view class="account" style="margin-top: 18rpx;">个人消费业绩(元)</view>
				<view :style="{'background-image': `url(${appImg.mall.balance_recharge})`}"
				      class="dir-left-nowrap bg cross-center">
				    <image class="image box-grow-0" src="../balance/image/icon-balance.png"></image>
				    <view class="balance-text box-grow-1"></view>
				    <view class="balance-price box-grow-0">{{total_price}}</view>
				</view>
				<view class="account" style="margin-top: 18rpx;">我的保证金</view>
				<view :style="{'background-image': `url(${appImg.mall.balance_recharge})`}"
				      class="dir-left-nowrap bg cross-center">
				    <image class="image box-grow-0" src="../balance/image/icon-balance.png"></image>
				    <view class="balance-text box-grow-1"></view>
				    <view class="balance-price box-grow-0">{{userInfo.options.bail}}</view>
				</view>
				
				<view v-if="userInfo.options.bail > 0" class="btn" style="margin-top: 24rpx;">
				    <app-button @click="unbinding"
				                :round-size="customPage.recharge_btn_radius+ `rpx`"
				                :color="customPage.recharge_btn_color"
				                height="88"
				                border-color="#3873ff"
				                background="#3873ff">解绑保证金
				    </app-button>
				</view>
				
		 	</view>
		 	
		 	<view class="dir-left-wrap select" style="margin-top: 100rpx;">
		 	    <view v-for="(item,index) in list" :key="index" @click="setPrice(index)"
		 	          class="dir-top-nowrap cross-center main-center box" :class="index === selected? 'active':''">
		 	        <view class="price">{{item.name}}</view>
					<view class="price">充{{ item.price }}元</view>
		 	    </view>
		 	</view>
		 	
			
			<view v-if="list.length > 0" class="btn" style="margin-top: 24rpx;">
			    <app-button @click="submit"
			                :round-size="customPage.recharge_btn_radius+ `rpx`"
			                :color="customPage.recharge_btn_color"
			                height="88"
			                :border-color="customPage.recharge_btn_background"
			                :background="customPage.recharge_btn_background">{{customPage.recharge_btn_title}}
			    </app-button>
			</view>
			
			
			
		 	<view class="protocol-content" style="display: flex; width: 100%; margin-top: 18rpx;">
		 	    <app-rich-text :content="protocol_data"></app-rich-text>
		 	</view>
		 </view>
	</app-layout>
</template>

<script>
	import {mapState} from 'vuex';
	
	import appRichText from "../../components/basic-component/app-rich/parse.vue";
	
	export default {
		computed: {
		    ...mapState({
		        customPage: state => state.mallConfig.recharge_page_custom,
		        appImg: state => state.mallConfig.__wxapp_img,
		        userInfo: state => state.user.info,
		    }),
		},
		components: {
			appRichText,
		},
		data() {
			return {
				selected: -1,
				list: [1,2],
				protocol_data:null,
				total_price:0,
			};
		},
		
		onLoad() {
			this.loadData();
		},
		methods: {
			loadData: function () {
			    const self = this;
			    self.$showLoading({title: `加载中`});
			    self.$request({
			        url: self.$api.new_share.list,
			    }).then(info => {
			        self.$hideLoading();
			        if (info.code === 0) {
			            self.list = info.data.list;
						self.total_price = info.data.total_price;
			        }
			    }).catch(info => {
			        self.$hideLoading();
			    })
				
				
				let that = this;
				this.$request({
				    url: that.$api.article.detail,
				    data: {
				        article_id: 2
				    },
				}).then(response=>{
				    that.$hideLoading();
				    if(response.code == 0) {
				        that.protocol_data = response.data.article.content;
						console.log(that.protocol_data);
				    }
				}).catch(e => {
				    that.$hideLoading();
				});
				
				
			},
			
			setPrice: function (index) {
			    this.selected = index;
			},
			submit: function () {
			    const self = this;
				let para = {
				    id: self.list[self.selected].id,
				}
				
				self.$showLoading({title: `加载中`});
				self.$request({
				    url: self.$api.new_share.create,
				    data: para,
				    method: 'POST',
				}).then(info => {
				    self.$hideLoading();
				    if (info.code === 0) {
				        self.$payment.pay(info.data.pay_id).then(e => {
				            uni.showModal({
				                title: '提示',
				                content: '购买成功！',
				                showCancel: false,
				                confirmText: '确定',
				                success(e) {
				                    if (e.confirm) {
				                        uni.navigateBack({delta: 1})
				                    }
				                }
				            });
				        }).catch(e => {
				            //uni.showToast({'title': e, icon: 'none'});
				        });
				    } else {
				        uni.showToast({'title': info.msg, icon: 'none'});
				    }
				}).catch(info => {
				    self.$hideLoading();
				})
			},
			unbinding: function () {
				const self = this;
				uni.showModal({
				    title: '提示',
				    content: '是否解绑',
				    showCancel: true,
				    confirmText: '确定',
				    success(e) {
				        if (e.confirm) {
							self.confirm();
				        }
				    }
				});
			},
			confirm() {
				const self = this;
				self.$showLoading({title: `加载中`});
				self.$request({
				    url: self.$api.new_share.unbinding,
				    data: {},
				    method: 'POST',
				}).then(info => {
				    self.$hideLoading();
				    if (info.code === 0) {
						uni.showModal({
						    title: '提示',
						    content: info.msg,
						    showCancel: false,
						    confirmText: '确定',
						    success(e) {
						        if (e.confirm) {
						            uni.navigateBack({delta: 1})
						        }
						    }
						});
				    } else {
				        uni.showToast({'title': info.msg, icon: 'none'});
				    }
				}).catch(info => {
				    self.$hideLoading();
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.recharge {
	    background: #FFFFFF;
	    padding: #{40rpx} #{24rpx} 0;
	    min-height: 100vh;
	    .btn .app-view .app-secondary {
	        border-width: 0px !important;
	    }
	}
	
	
	.account {
	    font-size: #{24rpx};
	    border-left: #{6rpx} solid #ff4544;
	    padding-left: #{24rpx};
	    color: #666666;
	    margin-bottom: #{32}rpx;
	}
	
	.bg {
	    background-repeat: no-repeat;
	    background-size: #{702rpx} #{160rpx};
	    height: #{160rpx};
	    width: #{702rpx};
	    color: #666666;
		
		.image {
		    width: #{72rpx};
		    height: #{72rpx};
		    margin-left: #{40rpx};
		}
		.balance-text {
		    font-size: #{42rpx};
		    margin-left: #{20rpx}
		}
		
		.balance-price {
		    font-size: #{46rpx};
		    margin-right: #{56rpx};
		}
	}
	
	.select {
	    margin: 0 #{-12rpx};
	
	    .box {
	        height: #{183rpx};
	        width: #{339rpx};
	        margin: #{24rpx} #{12rpx} 0 #{12rpx};
	        padding: 0 24#{rpx};
	        border: #{1px} solid #cccccc;
	        border-radius: #{16rpx};
	
	        .price {
	            font-size: #{32rpx};
	            font-weight: bold;
	            color: #666666;
	        }
	
	        .send {
	            font-size: #{24rpx};
	            color: #999999;
	        }
	
	        .member-info {
	            border: 1#{rpx} solid #999999;
	            border-radius: 24#{rpx};
	            height: 30#{rpx};
	            width: 60#{rpx};
	            font-size: 18#{rpx};
	            margin-left: 10#{rpx};
	        }
	    }
	
	    .active {
	        border: #{1px} solid #ff4544;
	
	        .price {
	            color: #ff4544
	        }
	
	        .send {
	            color: #ff4544;
	        }
	
	        .member-info {
	            border-color: #ff4544;
	        }
	    }
	}
	
	.text {
	    margin-top: -8rpx;
	}
	.protocol-content {
	    padding: #{10rpx} #{20rpx};
	    height: #{720rpx};
	    overflow: auto;
	    color: #353535;
	}
	
</style>